<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <%
        String bathPath = request.getContextPath();
        pageContext.setAttribute("bathPath", bathPath);
    %>
    <meta charset="utf-8">
    <title>公出/请假</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="${bathPath}/layui/css/layui.css">
    <link rel="stylesheet" href="${bathPath}/css/common.css">
    <link rel="stylesheet" href="${bathPath}/css/formSelects-v4.css">
    <link rel="stylesheet" href="${bathPath}/css/holiday.css">
    <style type="text/css">
        #test1,#test2{
            width:150px;
        }
    </style>
</head>
<body>
<div class="holiday">
    <div class="layui-form demoTable">
        <div class="layui-inline">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline">
                <select type="text" id="depId" name="depId" lay-verify="required" lay-filter="business"
                        autocomplete="off" class="layui-input">
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">员工</label>
            <div class="layui-input-inline">
                <select type="text" id="userName" xm-select="userName" xm-select-show-count="1" xm-select-direction="down" lay-filter="userName" name="userName" lay-verify="required" autocomplete="off"
                        class="layui-input">
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">起止时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="test1" id="test1" placeholder="请选择开始日期" autocomplete="off">
            </div>
            <span class="separator">-</span>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="test2" id="test2" placeholder="请选择结束日期">
            </div>
        </div>
        <div class="layui-inline" style="margin-left: 20px;">
            <button class="layui-btn layui-btn-normal w92" data-type="reload">查询</button>
            <button class="layui-btn layui-btn-danger" data-type="getCheckData">批量删除</button>
            <button class="layui-btn layui-btn-normal" data-type="add">新增</button>
        </div>
        <%--        <div class="layui-inline ml-20">--%>
        <%--            <input type="checkbox" name="" title="设计报表" lay-skin="primary"/>--%>
        <%--        </div>--%>

        <%--        <div class="layui-inline">--%>
        <%--            <button class="layui-btn layui-btn-normal w92" type="button" id="print">生成报表</button>--%>
        <%--        </div>--%>

        <!--<div class="layui-inline">-->
        <!--<button class="layui-btn w92" id="export" type="button">导出</button>-->
        <!--</div>-->
    </div>

<%--    <div class="layui-btn-group ml-54 demoTable">--%>
<%--        <button class="layui-btn layui-btn-danger" data-type="getCheckData">批量删除</button>--%>
<%--    </div>--%>

<%--    <div class="layui-btn-group ml-54 demoTable">--%>
<%--        <button class="layui-btn layui-btn-primary" data-type="add">新增</button>--%>
<%--    </div>--%>

    <table class="layui-hide" id="holiday" lay-filter="test"></table>
    <script type="text/html" id="barDemo">
        <%--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">新增</a>--%>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>

<!--添加弹出层-->
<div id="addMask" style="display: none;">
    <form class="layui-form setting-holiday" action="#" id=runForm" lay-filter="example">
        <div class="layui-form-item">
            <input type="hidden" value="" id="userId" name="userId">
            <input type="hidden" value="" id="id" name="id">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="startTime" id="startTime" lay-verify="required"
                       placeholder="请选择日期">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" name="endTime" class="layui-input" id="endTime" lay-verify="required"
                       placeholder="请选择日期">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">请假类型</label>
            <div class="layui-input-inline">
                <select type="text" id="leaveClassId" name="leaveClassId" lay-verify="required" autocomplete="off" class="layui-input">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">原因</label>
            <div class="layui-input-inline">
                <input type="text" name="yuanYin" class="layui-input" id="yuanYin" placeholder="请输入原因">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button lay-submit class="layui-btn layui-btn-normal" lay-filter="formTest">确定</button>
                <button type="button" class="layui-btn layui-btn-primary cancel-layer">取消</button>
            </div>
        </div>
    </form>
</div>
<script src="${bathPath}/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js"></script>
<script src="${bathPath}/js/formSelects-v4.min.js"></script>
<script type="text/javascript" src="${bathPath}/js/common.js"></script>
<script>
    var layerIndex = null;
    $(function () {
        initLayUI();
        $.ajax({
            type: "POST",
            async: false,
            data: "",
            url: "${bathPath}/dept/selectDpetName.action",
            success: function (msg) {
                var html = "";
                html += "<option value=''>" + '请选择' + "</option>";
                for (var i = 0; i < msg.length; i++) {
                    html += "<option value='" + msg[i].depID + "'>" + msg[i].depName + "</option>";
                }
                $("#depId").html(html);
            }
        });
    })


    $(function () {
        $.ajax({
            type: "POST",
            async: false,
            data: "",
            url: "${bathPath}/leaveClass/selectLeaveClassName.action",
            success: function (msg) {
                var html = "";
                html += "<option value=''>" + '请选择' + "</option>";
                for (var i = 0; i < msg.length; i++) {
                    html += "<option value='" + msg[i].id + "'>" + msg[i].leaveName + "</option>";
                }
                $("#leaveClassId").html(html);
            }
        });
    })


    function formatterType(type) {
        var result = '';
        switch (type) {
            case 0:
                result = '公出';
                break;
            case 1:
                result = '病假';
                break;
            case 2:
                result = '事假';
                break;
            case 3:
                result = '探亲假';
                break;
            default:
                break;
        }
        return result;
    }


    function initLayUI() {
        layui.use(['form', 'laydate', 'layer', 'table'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            var table = layui.table;
            var layer = layui.layer;
            var formSelects = layui.formSelects;
            //起止时间1
            laydate.render({
                elem: '#test1'
                , type: 'datetime'
                ,trigger: 'click'
            });
            //起止时间2
            laydate.render({
                elem: '#test2'
                ,type: 'datetime'
                ,trigger: 'click'
            });

            table.render({
                elem: '#holiday'
                , url: '${bathPath}/userSpeday/selectAll.action'
                , toolbar: true
                , title: '用户数据表'
                ,height: 'full-76'
                , cols: [[
                    // {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计行'}
                    {type: 'checkbox'}
                    , {field: 'userName', title: '姓名', minWidth: 100}
                    , {field: 'userId', title: '登记号码', minWidth: 100}
                    , {field: 'startTime', title: '开始时间', sort: true,minWidth:170}
                    , {field: 'endTime', title: '结束时间', sort: true,minWidth:170}
                    , {field: 'leaveName', title: '假类', minWidth: 100}
                    , {field: 'yuanYin', title: '原因', minWidth: 100}
                    , {toolbar: '#barDemo', title: '操作',minWidth:120}
                ]]
                , page: true
                , response: {
                    statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , id: 'testReload'
                ,parseData: function(res){ //res 即为原始返回的数据
                    $.each(res.data,function(i,item){
                        res.data[i].startTime= formatTime(item.startTime);
                        res.data[i].endTime= formatTime(item.endTime);
                    })
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data//解析数据列表
                    };
                }
            });


            //监听工具条
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                // $('#userId').val(data.userId);
                if (obj.event === 'add') {
                    //传入add逻辑事件
                    // runEventAdd();
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        var dataJson = {};
                        dataJson.id = data.id;
                        $.ajax({
                            type: 'POST',
                            data: dataJson,
                            contentType:"application/x-www-form-urlencoded",
                            url: '${bathPath}/userSpeday/delete.action',
                            success: function (data) {
                                if (data == 'SUCCESS') {
                                    layer.close(index);
                                    active.reload();
                                }
                            }
                        })
                    });
                } else if (obj.event === 'edit') {
                    //传入编辑逻辑事件
                    runEvent(data);

                } else if (obj.event === 'cancel') {
                    layer.close(layerIndex);
                }
            });

            var $ = layui.$, active = {
                add:function(){
                    runEvent();
                },
                getCheckData: function () { //获取选中数据
                    var checkStatus = table.checkStatus('testReload')
                        , data = checkStatus.data;
                    if (data.length === 0) {
                        layer.msg('至少也得选一个吧', {icon: 2});
                        return;
                    }
                    var ids = '';
                    for (var i = 0; i < data.length; i++) {
                        ids += data[i].id + ',';
                    }
                    console.log(ids);
                    layer.confirm('真的确定删除吗', function (index) {
                        // obj.del();
                        var dataJson = {};
                        dataJson.id = ids;
                        $.ajax({
                            type: 'POST',
                            data: dataJson,
                            contentType:"application/x-www-form-urlencoded",
                            url: '${bathPath}/userSpeday/delete.action',
                            success: function (data) {
                                if (data == 'SUCCESS') {
                                    layer.close(index);
                                    active.reload();
                                }
                            }
                        })
                        layer.close(index);
                    });
                },
                reload: function () {
                    var depId = $('#depId');
                    var beginTime = $('#test1');
                    var endTime = $('#test2');
                    var userId = formSelects.value('userName', 'valStr');
                    //执行重载
                    table.reload('testReload', {
                        where: {
                            deptId: depId.val(),
                            userId: userId,
                            startTime: beginTime.val(),
                            endTime: endTime.val()
                        }
                        , page: {
                            curr: 1
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            $('.cancel-layer').on('click', function () {
                layer.close(layerIndex);
            })

            form.on('submit(formTest)', function (data) {
                // layer.alert(JSON.stringify((data.field),{
                //     title:'最终提交的信息'
                // }))
                if(!data.field.id){
                    var dataJson = data.field;
                    dataJson.userId = $('#userId').val();
                    $.ajax({
                        type: 'POST',
                        data: dataJson,
                        url: '${bathPath}/userSpeday/insert.action',
                        success: function (data) {
                            if (data == 'SUCCESS') {
                                layer.close(layerIndex);
                                //执行重载
                                table.reload('testReload', {
                                    where: {
                                    }
                                    , page: {
                                        curr: 1
                                    }
                                });
                            }
                        }
                    })
                }else {
                    var dataJson = data.field;
                    dataJson.userId = $('#userId').val();
                    $.ajax({
                        type: 'POST',
                        data: dataJson,
                        url: '${bathPath}/userSpeday/update.action',
                        success: function (data) {
                            if (data == 'SUCCESS') {
                                layer.close(layerIndex);
                                active.reload();
                            }
                        }
                    })
                }


                return false;
            })

            form.on('select(business)', function (data) {
                //获取部门的ID通过异步查询子集
                var depId = $(this).attr("lay-value");
                $.ajax({
                    type: "POST",
                    async:false,
                    data: {depId:depId},
                    dataType:'json',
                    contentType:"application/x-www-form-urlencoded",
                    url: "${bathPath}/userInfo/selectUserName.action",
                    success: function (msg) {
                        var html = "";
                        if(msg && msg.length > 0){
                            html += "<option value=''>" + '请选择员工' + "</option>";
                            for (var i = 0; i < msg.length; i++) {
                                html += "<option value='" + msg[i].userID + "'>" + msg[i].userName + "</option>";
                            }
                        }
                        $("#userName").html(html);
                        form.render('select');
                        formSelects.render('userName');
                    }
                });
            });


            var runEvent = function () {
                console.log(arguments);
                //初始化表单值
                if (arguments.length > 0) {
                    var data = arguments[0];
                    form.val('example', {
                        'id':data.id,
                        'startTime': data.startTime,
                        'endTime': data.endTime,
                        'leaveClassId': data.leaveClassId,
                        'yuanYin': data.yuanYin
                    })
                } else {
                    // var userName = $('#userName').val();
                    var userName = formSelects.value('userName', 'valStr');
                    if(!userName){
                        layer.alert('请选择员工!');
                        return;
                    }else{
                        $('#userId').val(userName);
                    }
                    form.val('example', {
                        id:'',
                        'startTime': '',
                        'endTime': '',
                        'leaveClassId': '',
                        'yuanYin': ''
                    })
                }
                layerIndex = layer.open({
                    type: 1
                    , title: '公出/请假设置' //不显示标题栏
                    , area: '350px;'
                    , shade: 0.8
                    , id: 'LAY_layuipro2' //设定一个id，防止重复弹出
                    // ,btn: ['确定', '取消']
                    // ,btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content: $('#addMask')
                    , success: function (layero, index) {
                        console.log(layero);
                        laydate.render({
                            elem: '#startTime'
                            , type: 'datetime'
                            ,trigger: 'click'
                        });
                        //日期时间选择器
                        laydate.render({
                            elem: '#endTime'
                            , type: 'datetime'
                            ,trigger: 'click'
                        });
                        form.render();
                    }
                });
            }
        });

    }


</script>
</body>
</html>